<template>
	<view class="assign-order">
		<!-- 订单信息 -->
		<view class="order-card" v-if="orderInfo">
			<view class="card-title">订单信息</view>
			<view class="order-info">
				<text class="order-title">{{ orderInfo.title }}</text>
				<view class="info-row">
					<text class="label">预算：</text>
					<text class="value budget">￥{{ orderInfo.budget }}</text>
				</view>
				<view class="info-row">
					<text class="label">分类：</text>
					<text class="value">{{ orderInfo.categoryName }}</text>
				</view>
				<view class="info-row">
					<text class="label">发布者：</text>
					<text class="value">{{ orderInfo.userName }}</text>
				</view>
				<view class="info-row">
					<text class="label">截止时间：</text>
					<text class="value">{{ formatTime(orderInfo.deadline) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 技术员列表 -->
		<view class="tech-section">
			<view class="section-title">选择技术员</view>
			<view class="search-bar">
				<input 
					class="search-input" 
					placeholder="搜索技术员姓名..." 
					v-model="searchKeyword"
					@input="onSearch"
				/>
			</view>
			
			<view class="tech-list">
				<view 
					class="tech-item" 
					v-for="tech in filteredTechList" 
					:key="tech.id"
					:class="{ selected: selectedTechId === tech.id }"
					@click="selectTech(tech)"
				>
					<view class="tech-info">
						<view class="avatar">
							<text class="avatar-text">{{ tech.realName ? tech.realName.charAt(0) : 'T' }}</text>
						</view>
						<view class="info">
							<text class="name">{{ tech.realName || tech.username }}</text>
							<text class="skills">{{ tech.skills || '暂无技能标签' }}</text>
							<view class="stats">
								<text class="orders">完成订单: {{ tech.completedOrders || 0 }}</text>
								<text class="rating">评分: {{ tech.rating || 5.0 }}</text>
							</view>
						</view>
					</view>
					
					<view class="tech-status">
						<text class="status" :class="getStatusClass(tech.status)">
							{{ getStatusText(tech.status) }}
						</text>
						<text class="current-orders">当前: {{ tech.currentOrders || 0 }}单</text>
					</view>
					
					<view class="select-icon" v-if="selectedTechId === tech.id">
						<text>✓</text>
					</view>
				</view>
				
				<view class="empty" v-if="filteredTechList.length === 0">
					<text>{{ searchKeyword ? '未找到匹配的技术员' : '暂无可用技术员' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 指派说明 -->
		<view class="note-section" v-if="selectedTechId">
			<view class="section-title">指派说明</view>
			<textarea 
				class="note-input" 
				placeholder="请输入指派说明（可选）..."
				v-model="assignNote"
				maxlength="200"
			></textarea>
			<view class="char-count">{{ assignNote.length }}/200</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-section">
			<button 
				class="assign-btn" 
				:disabled="!selectedTechId || loading"
				@click="handleAssign"
			>
				{{ loading ? '指派中...' : '确认指派' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: null,
				techList: [],
				filteredTechList: [],
				selectedTechId: null,
				assignNote: '',
				searchKeyword: '',
				loading: false
			}
		},
		onLoad(options) {
			this.checkPermission()
			this.orderId = options.orderId
			this.loadOrderInfo()
			this.loadTechList()
		},
		methods: {
			checkPermission() {
				if (!this.$store || !this.$store.getters || !this.$store.getters.isDispatcher) {
					uni.showToast({
						title: '权限不足',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			},
			
			async loadOrderInfo() {
				try {
					const res = await this.$api.getOrderDetail(this.orderId)
					if (res.code === 200) {
						this.orderInfo = res.data
					}
				} catch (error) {
					uni.showToast({
						title: error.message || '加载订单信息失败',
						icon: 'none'
					})
				}
			},
			
			async loadTechList() {
				try {
					const res = await this.$api.getTechList()
					if (res.code === 200) {
						this.techList = res.data || []
						this.filteredTechList = [...this.techList]
					}
				} catch (error) {
					uni.showToast({
						title: error.message || '加载技术员列表失败',
						icon: 'none'
					})
				}
			},
			
			onSearch() {
				if (!this.searchKeyword.trim()) {
					this.filteredTechList = [...this.techList]
				} else {
					const keyword = this.searchKeyword.toLowerCase()
					this.filteredTechList = this.techList.filter(tech => {
						const name = (tech.realName || tech.username).toLowerCase()
						const skills = (tech.skills || '').toLowerCase()
						return name.includes(keyword) || skills.includes(keyword)
					})
				}
			},
			
			selectTech(tech) {
				this.selectedTechId = tech.id
			},
			
			async handleAssign() {
				if (!this.selectedTechId) {
					uni.showToast({
						title: '请选择技术员',
						icon: 'none'
					})
					return
				}
				
				this.loading = true
				
				try {
					const assignData = {
						techId: this.selectedTechId
					}
					
					if (this.assignNote.trim()) {
						assignData.note = this.assignNote.trim()
					}
					
					await this.$api.assignOrder(this.orderId, assignData)
					
					uni.showToast({
						title: '指派成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
					
				} catch (error) {
					uni.showToast({
						title: error.message || '指派失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			getStatusClass(status) {
				// 根据技术员状态返回样式类
				if (status === 'available') return 'status-available'
				if (status === 'busy') return 'status-busy'
				return 'status-offline'
			},
			
			getStatusText(status) {
				const statusMap = {
					'available': '空闲',
					'busy': '忙碌',
					'offline': '离线'
				}
				return statusMap[status] || '未知'
			},
			
			formatTime(time) {
				if (!time) return ''
				const date = new Date(time)
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.assign-order {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 120rpx;
	}
	
	.order-card, .tech-section, .note-section {
		background: #fff;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.card-title, .section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.order-info {
		.order-title {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.info-row {
			display: flex;
			margin-bottom: 15rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
				width: 120rpx;
			}
			
			.value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				
				&.budget {
					font-weight: bold;
					color: #FF6B6B;
				}
			}
		}
	}
	
	.search-bar {
		margin-bottom: 30rpx;
		
		.search-input {
			width: 100%;
			height: 80rpx;
			border: 2rpx solid #e0e0e0;
			border-radius: 40rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			
			&:focus {
				border-color: #007AFF;
			}
		}
	}
	
	.tech-list {
		.tech-item {
			border: 2rpx solid #e0e0e0;
			border-radius: 15rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			position: relative;
			transition: all 0.3s ease;
			
			&.selected {
				border-color: #007AFF;
				background: rgba(0, 122, 255, 0.05);
			}
			
			.tech-info {
				flex: 1;
				display: flex;
				align-items: center;
				
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					background: linear-gradient(45deg, #667eea, #764ba2);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
					
					.avatar-text {
						font-size: 28rpx;
						font-weight: bold;
						color: #fff;
					}
				}
				
				.info {
					flex: 1;
					
					.name {
						display: block;
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
					}
					
					.skills {
						display: block;
						font-size: 24rpx;
						color: #666;
						margin-bottom: 10rpx;
					}
					
					.stats {
						display: flex;
						gap: 30rpx;
						
						.orders, .rating {
							font-size: 24rpx;
							color: #999;
						}
						
						.rating {
							color: #ff9500;
						}
					}
				}
			}
			
			.tech-status {
				text-align: right;
				margin-right: 40rpx;
				
				.status {
					display: block;
					font-size: 24rpx;
					padding: 4rpx 12rpx;
					border-radius: 12rpx;
					margin-bottom: 10rpx;
					
					&.status-available {
						color: #34c759;
						background: rgba(52, 199, 89, 0.1);
					}
					
					&.status-busy {
						color: #ff9500;
						background: rgba(255, 149, 0, 0.1);
					}
					
					&.status-offline {
						color: #999;
						background: rgba(153, 153, 153, 0.1);
					}
				}
				
				.current-orders {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.select-icon {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background: #007AFF;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
		
		.empty {
			text-align: center;
			padding: 100rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}
	
	.note-section {
		.note-input {
			width: 100%;
			min-height: 200rpx;
			border: 2rpx solid #e0e0e0;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			line-height: 1.5;
			
			&:focus {
				border-color: #007AFF;
			}
		}
		
		.char-count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
	
	.action-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		border-top: 1rpx solid #eee;
		
		.assign-btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(45deg, #007AFF, #0056CC);
			color: #fff;
			border: none;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: bold;
			
			&:disabled {
				opacity: 0.6;
				background: #ccc;
			}
		}
	}
</style>